<template>
	<div class="middle_foreignData">
		<span>国外数据</span>
		<el-tooltip content="回车查询" placement="top-start">
			<el-input style="margin-top: 15px;" placeholder="请输入内容" @keyup.enter.native="searchForeignMessage()"
				v-model="searchforeignmessage" clearable>
				<template slot="prepend">国家:</template>
			</el-input>
		</el-tooltip>
		<el-table :data="searchforeignmessage==''?foreignDataAll:foreignmessage" :height="tableHeight"
			style="width: 100%;font-size: calc(1.1876em);">
			<el-table-column property="cityName" label="国家" width="100">
			</el-table-column>
			<el-table-column property="confirmedNum" label="确诊"></el-table-column>
			<el-table-column property="deadNum" label="死亡"></el-table-column>
			<el-table-column property="curedNum" label="治愈"></el-table-column>
			<el-table-column property="confirmedInc" label="确诊新增"></el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				foreignData: [], //部分外国数据
				foreignDataAll: [], //所有外国数据
				searchforeignmessage: "", //查询外国数据
				foreignmessage: [], //单个外国数据
				tableHeight: 500, //表高度
			}
		},
		methods: {
			getforeignmessage: function() {
				this.$axios({
					method: 'post',
					url: 'http://route.showapi.com/2217-5?showapi_appid=610642&showapi_sign=200e35bac9af4e4ab0f0d360336098f6'
				}).then(response => {
					let message = response.data.showapi_res_body.foreignList
					let len = response.data.showapi_res_body.foreignList.length
					for (var i = 0; i < 10; i++) {
						this.foreignData.push({
							cityName: message[i].areaName,
							confirmedNum: message[i].confirmedNum,
							deadNum: message[i].deadNum,
							curedNum: message[i].curedNum
						})
					}
					for (var i = 0; i < len; i++) {
						this.foreignDataAll.push({
							cityName: message[i].areaName,
							confirmedNum: message[i].confirmedNum,
							deadNum: message[i].deadNum,
							curedNum: message[i].curedNum,
							curedInc: message[i].inc_info.cured_inc,
							deadInc: message[i].inc_info.dead_inc,
							confirmedInc: message[i].inc_info.confirmed_inc
						})
					}
				}).catch(error => {
					console.log(error);
				})
			},
			searchForeignMessage: function() {
				this.foreignmessage = []
				let len = this.foreignDataAll.length
				for (var i = 0; i < len; i++) {
					if (this.searchforeignmessage == this.foreignDataAll[i].cityName) {
						console.log("找到你要的国家啦");
						this.foreignmessage.push({
							cityName: this.foreignDataAll[i].cityName,
							confirmedNum: this.foreignDataAll[i].confirmedNum,
							deadNum: this.foreignDataAll[i].deadNum,
							curedNum: this.foreignDataAll[i].curedNum,
							curedInc: this.foreignDataAll[i].curedInc,
							deadInc: this.foreignDataAll[i].deadInc,
							confirmedInc: this.foreignDataAll[i].confirmedInc
						})
					}
				}
			},
			getHeight() {
				console.log(window.innerHeight);
				this.tableHeight = window.innerHeight - 550
			}
		},
		mounted() {
			this.getforeignmessage()
		},
		created() {
			window.addEventListener('resize', this.getHeight)
		},
		destroyed() {
			window.removeEventListener('resize', this.getHeight)
		}
	}
</script>

<style>
	.middle_foreignData {
		padding-top: 5px;
		text-align: center;
		border: 1px #F8F9FA solid;
		background-color: white;
	}
</style>
